<template>
<div class="container">
  <form class="input-box">
    <div class="item">用户名：<input type="text" class="input" v-model="username" /></div>
    <div class="item">密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" class="input" v-model="password" autocomplete /></div>
    <button class="btn" @click="loginTo">登陆</button>
  </form>
</div>
</template>

<script>
import {
  login
} from '@/assets/api/moudules/face'
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    loginTo() {
      login({
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.code === 200) {
          localStorage.setItem('token', res.data.username)
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-size: $font-size-medium;

  .input-box {

    .item {
      margin-top: 20px;

      .input {
        height: 30px;
        padding: 0 10px;
        background-color: #fff;
        border-radius: 5px;
        outline: none;
      }
    }

    .btn {
      width: 280px;
      height: 40px;
      margin: 40px 0;
      border-radius: 5px;
      font-size: $font-size-medium;
    }
  }
}
</style>
